<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed />
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
    <ArticleItem v-for="item in searchResultList" :key="item.art_id" 
    :articleItem="item" 
    :isShow="false"
    @click.native="itemClickFn(item.art_id)"
    />
    </van-list>
  </div>
</template>

<script>
  import {searchResult} from '../../api/index.js'
  import ArticleItem from '@/components/ArticleItem.vue'
  export default {
    name: 'SearchResult',
    data(){
      return{
        page:1, // 请求第 ? 页
        per_page:100, // 一次请求 ? 条
        searchResultList:[], // 存放查找到的结果数组
        loading: false, // 正在请求下一页数据的变量
        finished: false, // 是否已全部加载完毕变量
        total:0, // 总条数
      }
    },
    created(){
      this.getSearchResult()
    },
    methods:{
      // 搜索输入框结果的方法
      async getSearchResult(cb){
       cb&&cb()
        try{
          let {data:res} = await searchResult({
            page:this.page, // 请求第?页
            per_page:this.per_page, // 一次请求?条数据
            q:this.$route.params.kw // 搜索关键词
          })
          // 针对第一次请求时没有数据返回
          if(res.data.results.length === 0){
              this.finished = true
             this.$notify({ type: 'warning', message: '没有找到相关数据' });
              return
          }
          this.searchResultList = [...this.searchResultList,...res.data.results]
          this.total = res.data.total_count
          this.loading = false
          console.log(res)
        }catch(e){
          console.log(e)
        }
      },
      // 上拉加载更多
      onLoad(){
        this.page++
        // 调用加载下一页数据,这里算是第二次请求数据了,所以需要传一个回调判断还有没有数据可以请求
         this.getSearchResult(()=>{
           if(this.page * this.per_page > this.total){
             this.finished = true
             return
           }
         })
      },
      // 点击搜索结果详情ArticleItem组件时触发跳转路由的回调事件
      itemClickFn(itemId){
        this.$router.push({
          path:`/article_detail?article_id=${itemId}`,
        })
      }
    },
    components:{
      ArticleItem
    }
  }
</script>

<style lang="less" scoped>
  .search-result-container {
    padding-top: 46px;
  }
</style>
